<template>
  <div>
    <!--排行榜-->
    <!-- 顶部组件 -->
    <header-nav></header-nav>
    <van-tabs type="card" color="#d44439" :animated="true">
      <!-- 此为歌单榜 -->
      <van-tab title="歌单">
        <div class="toplist">
          <div class="item" v-for="item in playList" :key="item.id">
            <router-link
              tag="div"
              :to="'/rank/ranklist?id=' + item.id"
              class="img"
            >
              <!--携带歌单id跳转播放页-->
              <img :src="item.coverImgUrl" alt="" />
            </router-link>
            <ul>
              <li
                v-for="(key, index) in item.tracks"
                :key="key.id"
                v-show="index < 3"
              >
                {{ index + 1 }}.{{ key.name }}-{{ key.ar[0].name }}
              </li>
            </ul>
          </div>
        </div>
      </van-tab>

      <!-- 此为MV榜 -->
      <van-tab title="MV">
        <div class="mvtoplist">
          <div
            class="MV-item"
            v-for="item in MVList"
            :key="item.id"
            @click="tomvplayer(item.id)"
          >
            <div class="mv-img">
              <img :src="item.cover" alt="" />
            </div>
            <div class="mv-explain">
              <ul>
                <li>{{ item.name }}</li>
                <li>{{ item.artistName }}</li>
                <li>{{ item.score | playCountData }}播放</li>
              </ul>
            </div>
          </div>
          <div class="mv-region">
            <span @click="(MvOption = '内地'), (option = 0)">内地</span>
            <span @click="(MvOption = '港台'), (option = 1)">港台</span>
            <span @click="(MvOption = '欧美'), (option = 2)">欧美</span>
            <span @click="(MvOption = '日本'), (option = 3)">日本</span>
            <span @click="(MvOption = '韩国'), (option = 4)">韩国</span>
            <div
              class="mv-region-border"
              :style="{ left: option * 46 + 'px' }"
            ></div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getToplist, getPlaylistDetail, getMVRankingList } from "../api/rank";
import headerNav from "../components/base/headerNav.vue";
export default {
  data() {
    return {
      playList: [],
      MVList: [],
      option: 0,
      MvOption: "内地",
    };
  },
  components: {
    headerNav,
  },
  // 路由中组件前路由守卫,提前请求数据
  beforeRouteEnter(to, from, next) {
    // 在导航完成前获取数据
    // 请求第一个接口数据
    getToplist().then((data) => {
      // next();//保证请求数据执行完成后
      // 直接指定methods数据方法,调用方法
      next((vm) => vm.getPlaylistDetailFun(data.list));
    });
  },
  methods: {
    // 请求第二个接口
    getPlaylistDetailFun(list) {
      for (let i = 0; i < list.length; i++) {
        let id = list[i].id;
        // 第二接口
        getPlaylistDetail({ id: id }).then((data) => {
          this.playList.push(data.playlist);
        });
      }
    },
    tomvplayer(id) {
      this.$emit("getMvPlayerId", id);
      document.querySelector(".mvplayer").webkitRequestFullscreen(); //触发div全屏
    },
    // getToplistFun(){
    //   // 第一接口
    //   getToplist().then((data)=>{
    //     // 请求网络速度过慢,页面已经渲染完成
    //     // 实例化vue=>实例化vuerouter=>组件执行生命周期钩子
    //     console.log(data);
    //     for(let i = 0;i <30;i++){
    //       let id = data.list[i].id;
    //       // 第二接口
    //       getPlaylistDetail({id:id}).then((data)=>{
    //         console.log(data);
    //         this.playList.push(data.playlist);
    //       })
    //     }
    //     console.log(this.playList);
    //   })

    // },
  },
  created() {},
  watch: {
    MvOption: {
      immediate: true,
      handler(newvalue) {
        getMVRankingList(newvalue).then((data) => {
          //获取MV排汗榜
          this.MVList = data.data;
        });
      },
    },
  },
  filters: {
    playCountData(value) {
      let w = value > 10000 ? value / 10000 : value; // 万计算
      let y = w > 10000 ? parseInt(value / 10000) + "亿" : parseInt(w) + "万"; //亿计算
      return y;
    },
  },
};
</script>

<style lang="less" scoped>
.van-tabs {
  & /deep/ div {
    margin: 0;
    border-radius: 0;
  }
}
.toplist,
.mvtoplist {
  margin-top: 5px !important;
  .item,
  .MV-item {
    margin: 0px 8px;
    padding: 2px 0px;
    border-bottom: 1px solid #e1e2e2;
    height: 90px;
    display: flex;
    .img,
    .mv-img {
      flex: 0 0 90px;
      margin-right: 18px;
      background-color: chocolate;
      width: 90px;
      height: 90px;
      border-radius: 2px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    ul {
      flex: 1;
      height: 90px;
      margin-top: 4px;
      li {
        height: 27px;
        line-height: 27px;
        font-size: 12px;
        color: #1b1b28;
        overflow: hidden;
      }
    }
  }
}
.mv-img {
  flex: 0 0 150px !important;
  width: 150px !important;
  height: 86px !important;
}
.MV-item {
  ul > li:nth-child(n + 2) {
    font-size: 8px;
    color: #bcbcbc;
  }
}
.mvtoplist {
  position: relative;
  padding-top: 36px;
  .mv-region {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 230px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    span {
      display: inline-block;
      width: 46px;
      text-align: center;
    }
    .mv-region-border {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 44px;
      height: 8px;
      background-color: rgba(254, 89, 99, 0.6);
      border: 1px solid transparent;
      border-radius: 8px;
      transition: all 0.3s;
    }
  }
}
</style>